<template>
  <div>
    <!--
      text： 默认设置，则展示为文字，如果不设置，则展示为图标
      iconWidth，iconHeight： 图标大小，默认是100px
      id：上传组件的标识，在同一个页面，ID不可以相同
      width，height：设置截取图片的长宽比，比如如果是头像，则可以设置为width=1 height=1,默认是width=4 height=3,
     -->
    <div class="first">
      <image-croper iconWidth='200'
                    iconHeight='200'
                    id="id2"
                    @getResult="getResult" />
    </div>

    <div class="first">
      <image-croper style="font-size:15px;color:coral;"
                    text="添加轮播图"
                    id="id2"
                    @getResult="getResult" />
    </div>
    <div class="imgClass">
      <img :src="imgUrl"
           alt="">
    </div>
  </div>
</template>

<script>
import imageCroper from './imageCroper'
export default {
  data () {
    return {
      imgUrl: null
    }
  },
  components: {
    imageCroper
  },
  methods: {
    getResult (url) {
      console.log(url)
      this.imgUrl = url
    }
  }
}
</script>

<style scoped>
.first {
  display: flex;
  /* justify-content: center; */
}
.imgClass {
  display: flex;
  /* justify-content: center; */
}
</style>
